<template>
    <div>
        <div class="userForm">

            <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleForm" size="mini">
                <!-- <el-col span="3"> -->
                <el-form-item label="用户名">
                    <el-input size="mini" style="width: 130px;" v-model="formInline.userName" placeholder="请输入用户名"
                        clearable></el-input>
                </el-form-item>
                <!-- </el-col> -->
                <el-form-item label="姓名">
                    <el-input size="mini" style="width: 130px;" v-model="formInline.name" placeholder="请输入姓名"
                        clearable></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input size="mini" style="width: 160px;" v-model="formInline.tal" placeholder="请输入电话"
                        clearable></el-input>
                </el-form-item>

                <el-form-item label="邮箱">
                    <el-input size="mini" style="width: 160px;" v-model="formInline.emily" placeholder="请输入电话"
                        clearable></el-input>
                </el-form-item>

                <el-form-item label="性别">
                    <el-select size="mini" style="width: 100px;" v-model="formInline.region" placeholder="性别" clearable>
                        <el-option label="男" value="0"></el-option>
                        <el-option label="女" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <!-- formater="yyyy-MM-dd" -->
                <el-form-item>
                    <el-date-picker size="mini" v-model="formInline.value" unlink-panels clearable type="daterange"
                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </el-form-item>

                <el-form-item>

                </el-form-item>
            </el-form>

            <el-button type="primary" @click="onSubmit(formInline)">查询</el-button>
            <el-button @click="resetForm('ruleForm')">刷新</el-button>
        </div>

        <el-row>
            <el-col>
                <div style="text-align: right;">
                    <el-button size="small" icon="el-icon-plus" @click=" isOpenAdd = true">新增</el-button>
                    <el-button type="primary" size="small" icon="el-icon-edit" plain :disabled="single"> 编辑</el-button>
                    <el-button type="danger" size="small" icon="el-icon-delete" plain :disabled="multiple"
                        @click="deleteByIds">
                        删除</el-button>
                    <el-button icon="el-icon-refresh" @click="getTable()"></el-button>
                    <span style="margin-right: 20px;"></span>
                </div>
            </el-col>
        </el-row>

        <div class="userTable">
            <el-table @selection-change="selsChange" :data="tableData" height="60vh" stripe style="width: 100%;"
                align="center">
                <el-table-column type="selection" width="50" align="center" />
                <el-table-column type="index" label="序号" :index="hlndex" width="60" align="center" />
                <el-table-column prop="menu" label="菜单" align="center"> </el-table-column>
                <el-table-column prop="path" label="路径" align="center" show-overflow-tooltip />
                <el-table-column prop="parentId" label="父级菜单id" align="center" width="100" />
                <el-table-column prop="parentMenu" label="父级菜单" align="center" width="100" />
                
                <el-table-column prop="createId" label="创建人" align="center" show-overflow-tooltip />
                <el-table-column prop="createTime" label="创建时间" align="center" width="150" />
                
                <el-table-column fixed="right" label="操作" width="200" align="center">
                    <template v-slot="scope">
                        <el-button-group>
                            <el-button type="info" size="mini" icon="el-icon-search" circle
                                @click="handleClick(scope.row)"></el-button>
                            <el-button class="edit" type="text" size="mini" circle @click="update(scope.row)"> <i
                                    class="el-icon-edit"></i>编辑</el-button>
                            <el-popconfirm @confirm="deleteById(scope.row.id)" confirm-button-text='好的'
                                cancel-button-text='不用了' icon="el-icon-info" icon-color="red" title="这是一段内容确定删除吗？">
                                <el-button color="red" slot="reference" type="text" size="mini" circle> <i
                                        class="el-icon-delete"></i>删除
                                </el-button>
                            </el-popconfirm>
                        </el-button-group>

                    </template>
                </el-table-column>
            </el-table>
        </div>


        <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>

        <div style="margin-left: 30%;margin-top: 10px;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>



        <!--  新增 -->
        <el-dialog title="新增用户" :visible.sync="isOpenAdd">
            <el-form :model="addform" label-position="left" style="margin-left: 2em;" label-suffix=" : ">
                <el-form-item label="菜单名称" :label-width="formLabelWidth">
                    <el-input v-model="addform.menu" autocomplete="off" style="width: 320px;" clearable></el-input>
                </el-form-item>
                <el-form-item label="菜单路径" :label-width="formLabelWidth">
                    <el-input v-model="addform.path" autocomplete="off" style="width: 320px;" clearable></el-input>
                </el-form-item>
                <el-form-item label="父级菜单ID" :label-width="formLabelWidth">
                    <el-input v-model="addform.parentId" autocomplete="off" style="width: 320px;" clearable></el-input>
                </el-form-item>
                <el-form-item label="父级菜单名称" :label-width="formLabelWidth">
                    <el-input v-model="addform.parentMenu" autocomplete="off" style="width: 320px;" clearable></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="isOpenAdd = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
            </div>
        </el-dialog>


        <!-- 抽屉 -->
        <el-drawer :title="title" :visible.sync="dialog" direction="rtl" size="45%" custom-class="demo-drawer" ref="drawer">
            <el-page-header @back="goBack" content="详情页面">
            </el-page-header>
            <div class="demo-drawer__content">
                <el-form :model="form" :disabled="isReadOnly" label-position="left" style="margin-left: 2em;"
                    label-suffix=" : ">
                    <el-form-item label="姓名" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off" style="width: 320px;" :readonly="isReadOnly"
                            clearable></el-input>
                    </el-form-item>

                    <el-form-item label="用户名" :label-width="formLabelWidth">
                        <el-input v-model="form.userName" autocomplete="off" style="width: 320px;" clearable></el-input>
                    </el-form-item>


                    <el-form-item label="密码" :label-width="formLabelWidth">
                        <el-input v-model="form.passWord" autocomplete="off" style="width: 320px;" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="盐" :label-width="formLabelWidth">
                        <el-input v-model="form.salt" autocomplete="off" style="width: 320px;" clearable></el-input>
                    </el-form-item>

                    <el-form-item label="性别" :label-width="formLabelWidth">
                        <el-select v-model="form.gender" placeholder="请选择性别" clearable>
                            <el-option label="男" :value="0"></el-option>
                            <el-option label="女" :value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="身份证号码" :label-width="formLabelWidth">
                        <el-input v-model="form.idCard" autocomplete="off" style="width: 320px;" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="电话" :label-width="formLabelWidth">
                        <el-input v-model="form.tal" autocomplete="off" style="width: 320px;" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" :label-width="formLabelWidth">
                        <el-input v-model="form.emily" autocomplete="off" style="width: 320px;" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="头像" :label-width="formLabelWidth">
                        <el-input v-model="form.avatar" autocomplete="off" style="width: 320px;" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="创建人" :label-width="formLabelWidth">
                        <el-input v-model="form.createId" autocomplete="off" style="width: 320px;" clearable></el-input>
                    </el-form-item>

                    <el-form-item label="创建时间" :label-width="formLabelWidth">
                        <el-input v-model="form.createTime" autocomplete="off" style="width: 320px;" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="创建时间" :label-width="formLabelWidth">
                        <el-date-picker v-model="form.createTime" type="datetime" placeholder="选择日期时间" clearable>
                        </el-date-picker>
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer">

                    <el-button @click="cancelForm">返 回</el-button>
                    <span v-if="isShow"><el-button type="primary" @click="closeDrawer()" :loading="loading">{{
                        loading ? '提交中 ...'
                        : '确 定' }}</el-button></span>

                </div>
            </div>
        </el-drawer>
    </div>
</template>  
<script>
import { searchmenu, deletemenu, getmenu, addmenu, setmenu } from "@/api/menuRequest";
import { setUser } from "@/util/store";


export default {
    data() {
        return {
            total: 0,
            page: 0,
            pageNum: 1,
            pageSize: 10,
            //搜索条件
            formInline: {
                name: '',
                userName: '',
                tal: '',
                emily: '',
                gender: '',
                value: '',
            },
            tableData: [],
            tables: [],
            //表格上方按钮禁用条件
            single: true,
            multiple: true,

            //新增表单
            isOpenAdd: false,
            addform: {
                menu: '',
                path: '',
                parentId: '',
                parentMenu: '',
                createId: '',
                createTime: '',
            },

            //抽屉
            dialog: false,
            title: '',
            form: {
                id: '',
                name: '',
                userName: '',
                passWord: '',
                salt: '',
                gender: '',
                tal: '',
                avatar: '',
                emily: '',
                createId: '',
                createTime: '',

            },
            formLabelWidth: '90px',
            timer: null,
            loading: false,
            isReadOnly: true,
            isShow: false,
        }
    },
    created() {
        this.getTable();
    },
    methods: {

        //表格勾选栏点击事件
        selsChange(value) {
            this.tables = value;
            if (this.tables.length > 0) {
                this.multiple = false;
            } else {
                this.multiple = true;
            }

            if (value.length == 1) {
                this.single = false;
            } else {
                this.single = true;
            }

        },
        //页大小改变触发
        handleSizeChange(size) {
            this.pageSize = size
            this.getTable();
        },
        //翻页触发
        handleCurrentChange(page) {
            this.page = page
            this.getTable();
        },

        //搜索
        onSubmit(formInline) {

            console.log('submit!');
            console.log(this.formInline);
            console.log(formInline);
            this.getTable();
        },
        //刷新表格
        resetForm(formInline) {
            this.$refs[formInline].resetFields();
        },

        //查询
        getTable() {
            let time = this.formInline.value;

            let data = {
                startTime: time != null && time.length > 0 ? this.formInline.value[0] : null,
                endTime: time != null && time.length > 0 ? this.formInline.value[1] : null,
                name: this.formInline.name,
                userName: this.formInline.userName,
                tal: this.formInline.tal,
                emily: this.formInline.emily,
                gender: this.formInline.gender,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }

            searchmenu(data).then(res => {

                this.tableData = res.data.result;
                this.page = res.data.totalPage;
                this.total = res.data.total;

            })

        },
        //修改
        update(row) {
            console.log(row);
            this.title = "修改信息";
            this.dialog = true;
            this.form = JSON.parse(JSON.stringify(row));
            this.isReadOnly = false;
            this.isShow = true;
        },
        //新增
        add() {
            useradd(this.addform).then(res => {
                if (res.code == 200) {
                    this.isOpenAdd = false;
                    this.getTable();
                }
            })

        },
        //批量删除
        deleteByIds() {
            this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let ids = [];
                for (let a of this.tables) {
                    ids.push(a.id);
                }
                userdelete(ids).then(res => {
                    if (res.code == 200) {
                        this.getTable();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        //单个删除

        deleteById(id) {
            let ids = [id];
            userdelete(ids).then(res => {
                if (res.code == 200) {
                    this.getTable();
                }
            })
        },

        //查看
        handleClick(row) {
            console.log(row);
            this.title = "查看用户信息";
            this.dialog = true;
            this.form = JSON.parse(JSON.stringify(row));
        },



        handleClose(done) {
            if (this.loading) {
                return;
            }
            // this.$confirm('确定要提交表单吗？')
            //     .then(_ => {
            //         this.loading = true;
            //         this.timer = setTimeout(() => {
            //             done();
            //             // 动画关闭需要一定的时间
            //             setTimeout(() => {
            //                 this.loading = false;
            //             }, 400);
            //         }, 2000);
            //     })
            //     .catch(_ => { });
        },
        cancelForm() {
            this.loading = false;
            this.dialog = false;
            clearTimeout(this.timer);
        },
        //提交修改
        closeDrawer() {
            userset(this.form).then(res => {
                if (res.code == 200) {
                    this.loading = false;
                    this.dialog = false;

                    this.getTable();
                }
            })
        }

    }

}
</script>

<style>
.demo-drawer__footer {

    text-align: center;
}

.dialog-footer {

    text-align: center;
}

.edit :hover {
    color: rgb(243, 219, 6);
}
</style>